<template>
  <header class="header">
    <!-- Start Header Navbar-->
    <div :class="`main-header inner-header header-2 ${sticky ? 'sticky fadeInDown' : ''}`">
      <div class="main-menu-wrap">
        <div class="container">
          <div class="row align-items-center">
            <div class="col-xl-3 col-lg-3 col-md-4 col-6">
              <!-- Logo -->
              <div class="logo">
                <nuxt-link to="/">
                  <img src="/assets/img/logo.png" alt="jironis">
                </nuxt-link>
              </div>
              <!-- End of Logo -->
            </div>
            <div class="col-xl-6 col-lg-6 col-md-4 col-6 menu-button">
              <div class="menu--inner-area clearfix">
                <div class="menu-wraper">
                  <nav>
                    <!-- Header-menu -->
                    <div class="header-menu dosis">

                      <div id="menu-button" class="" @click="changeMenu()">
                        <i class="fa fa-bars"></i>
                      </div>

                      <ul class="main-nav">
                        <li v-for="(item,index) in menuList" :key="index">
                          <a><nuxt-link @click.native="getRemove" :to="item.to">{{item.name}}</nuxt-link></a>
                        </li>
                      </ul>
                    </div>
                    <!-- End of Header-menu -->
                  </nav>
                </div>
              </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-5 d-md-block d-none">
              <div class="urgent-call text-right">
<!--                <nuxt-link to="/UserLogin" class="btn">立即登陆</nuxt-link>-->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- End Header Navbar-->
  </header>
</template>

<script>
export default {
  name: "NavOne",
  data() {
    return {
      sticky: false,
      menuList:[
        {
        name:"首页",
        to:"/"
      },
        {
        name:"发展方向",
        to:"#features"
      },
        {
        name:"荣誉",
        to:"#honor"
      },
        {
        name:"指导老师",
        to:"#pricing"
      },
        {
        name:"活动",
        to:"#active"
      },
      ]
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll);

    // this.mobileMenu();
  },

  methods: {

    handleScroll() {
      if (window.scrollY > 70) {
        this.sticky = true
      } else if (window.scrollY < 70) {
        this.sticky = false
      }
    },
    changeMenu(){
      let mainNav = document.querySelector(".main-nav");
      mainNav.style.display = ( (mainNav.style.display != "block" ? "block" : "none" ) );
    },
    getRemove(){
      let mainNav = document.querySelector(".main-nav");
      mainNav.style.display = "none";
    },
    // mobileMenu() {
    //   let mainNavToggler = document.querySelector("#menu-button");
    //   let mainNav = document.querySelector(".main-nav");
    //   mainNavToggler.addEventListener("click", function () {
    //     //mainNavToggler.classList.add('menu-opened');
    //     mainNav.style.display = ( (mainNav.style.display != "block" ? "block" : "none" ) );
    //   });
    // }

  }
}
</script>

<style scoped>
.nuxt-link-exact-active{
  color: #4698ff!important;
}
a{
  color:black;
}
/*a:active {*/
/*  color: #4698ff!important;*/
/*}*/
/*a:link{*/
/*  color: #4698ff;*/
/*}*/
/*a:visited{*/
/*  color: #4698ff;*/
/*}*/
/*a:hover{*/
/*  color: #4698ff;*/
/*}*/
/*a:active{*/
/*  color: #4698ff;*/
/*}*/

</style>
